<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<avue-crud
				ref="crud"
				v-model="form"
				:option="option"
				:data="data"
				:page="page"
				@on-load="getList"
				@row-save="handleSave"
				@row-del="rowDel"
				:before-open="handleOpenBefore"
				@row-update="handleUpdate"
				@search-change="searchChange"
				@refresh-change="refreshChange"
			>
				<template #categoryName-form>
					<avue-select
						placeholder="请选择 品类"
						@change="categoryChange"
						filterable
						:dic="categoryData"
						:props="categoryDataProps"
						v-model="form.categoryName"
					></avue-select>
				</template>
				<template #productName-form>
					<avue-select placeholder="请选择 产品" filterable :dic="productData" :props="productDataProps" v-model="form.productName"></avue-select>
				</template>
				<!-- <template #energyType-form>
				<avue-select
					placeholder="请选择 计量类型"
					filterable
					:dic="energyTypeDic"
					:props="energyTypeDicProps"
					v-model="form.energyType"
				></avue-select>
			</template> -->
				<template #ratedVoltage-form>
					<avue-input-number v-model="form.ratedVoltage" precision="2"></avue-input-number>
				</template>
				<template #ratedCurrent-form>
					<avue-input-number v-model="form.ratedCurrent" precision="2"></avue-input-number>
				</template>
				<template #factor-form>
					<avue-input-number v-model="form.factor" precision="2"></avue-input-number>
				</template>
			</avue-crud>
		</div>
	</div>
</template>
<script>
import { getModelList, addModelList, delModelList, editModelList } from '/@/api/consumptionmanagement/register/product';
import { fetchList as getCategoryList } from '/@/api/basiciot/device/category';
import { fetchList as getProductList } from '/@/api/basiciot/device/product';
import { useDict } from '/@/hooks/dict';

export default {
	data() {
		return {
			data: [],
			type: 'add',
			categoryData: [],
			categoryDataProps: {
				label: 'name',
				value: 'identify',
			},
			productData: [],
			productDataProps: {
				label: 'name',
				value: 'productKey',
			},
			form: {
				factor: 1,
				category: '',
			},
			searchForm: {},
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
			},
			energyTypeDic: [],
			energyTypeDicProps: {
				label: 'name',
				value: 'value',
			},
			option: {
				indexWidth: 100,
				index: false,
				searchMenuSpan: 10,
				searchLabelWidth: 'auto',
				searchMenuPosition: 'left',
				addBtn: true,
				editBtn: true,
				delBtn: true,
				columnBtn: false,
				searchSpan: 6,
				gridBtn: false,
				column: [
					{
						type: 'select',
						label: '所属品类',
						prop: 'categoryName',
						rules: [
							{
								required: true,
								trigger: 'blur',
								message: '所属品类',
							},
						],
					},
					{
						type: 'select',
						label: '所属产品',
						prop: 'productName',
						editDisabled: true,
						rules: [
							{
								required: true,
								trigger: 'blur',
								message: '所属产品',
							},
						],
						props: {
							label: 'name',
							value: 'code',
						},
						width: 200,
					},
					{
						type: 'select',
						label: '计量类型',
						prop: 'energyType',
						editDisabled: true,
						//dicUrl: `/api/admin/dict/type/energy_type`,
						dicData: [
							{ dictLabel: '电表', dictValue: '1' },
							{ dictLabel: '水表', dictValue: '2' },
							{ dictLabel: '气表', dictValue: '3' },
						],
						rules: [
							{
								required: true,
								trigger: 'blur',
								message: '计量类型必填',
							},
						],
						props: {
							label: 'dictLabel',
							value: 'dictValue',
						},
						search: true,

						control: (val, form) => {
							if (val != '1') {
								return {
									ratedCurrent: {
										display: false,
									},
									ratedVoltage: {
										display: false,
									},
								};
							} else {
								return {
									ratedCurrent: {
										display: true,
									},
									ratedVoltage: {
										display: true,
									},
								};
							}
						},
					},
					{
						type: 'input',
						label: '额定电压',
						prop: 'ratedVoltage',
					},
					{
						type: 'input',
						label: '额定电流',
						prop: 'ratedCurrent',
					},
					{
						type: 'input',
						label: '系数',
						prop: 'factor',
					},
					{
						type: 'input',
						label: '备注',
						prop: 'remark',
					},
					{
						type: 'date',
						label: '创建时间',
						width: 180,
						addDisplay: false,
						editDisplay: false,
						prop: 'createTime',
					},
				],
			},
		};
	},
	mounted() {
		getCategoryList({ current: 1, size: 9999 }).then((res) => {
			this.categoryData = res.data.records;
		});
		this.energyTypeDic = useDict('energy_type'); 
	},
	methods: {
		//品类切换事件
		categoryChange(val) {
			getProductList({ current: 1, size: 9999, category: val.value }).then((res) => {
				this.productData = res.data.records;
			});
		},
		refreshChange() {
			this.getList(this.page);
		},
		handleOpenBefore(done, type) {
			this.type = type;
			this.devModel = '';
			done();
		},
		searchChange(form, done) {
			this.searchForm = form;
			this.page.currentPage = 1;
			this.getList(this.page, form);
			done();
		},
		//初始化表格数据
		getList(page, params) {
			this.tableLoading = true;
			getModelList(
				Object.assign(
					{
						current: page.currentPage,
						size: page.pageSize,
					},
					params,
					this.searchForm
				)
			).then((res) => {
				this.data = res.data.records;
				this.page.total = res.data.total;
				this.tableLoading = false;
			});
		},
		handleSave: function (row, done, loading) {
			const params = {
				devModel: row.productName,
				energyType: row.energyType,
				ratedCurrent: row.ratedCurrent,
				ratedVoltage: row.ratedVoltage,
				factor: row.factor,
				remark: row.remark,
			};
			addModelList(params)
				.then((data) => {
					this.$message.success('添加成功');
					done();
					this.getList(this.page);
				})
				.catch(() => {
					loading();
				});
		},
		handleUpdate: function (row, index, done, loading) {
			const params = {
				devModel: row.productName,
				energyType: row.energyType,
				ratedCurrent: row.ratedCurrent,
				ratedVoltage: row.ratedVoltage,
				factor: row.factor,
				remark: row.remark,
			};
			editModelList(params)
				.then(() => {
					this.$message.success('修改成功');
					this.refreshChange();
					done();
				})
				.catch(() => {
					done();
				});
		},
		rowDel: function (row, index) {
			this.$confirm('是否确认删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delModelList([row.id]);
				})
				.then((data) => {
					this.$message.success('删除成功');
					this.getList(this.page);
				})
				.catch((cancelorerror) => {});
		},
	},
};
</script>
